---
layout: layouts/base.njk
oLayoutStyle: "o-layout--query"
---
<div  class="o-layout__heading o-layout-typography" data-o-component="o-syntax-highlight">
	<h6 class="bundle-heading">Your polyfill bundle:</h6>

	<ul data-o-component="o-tabs" class="o-tabs o-tabs--secondary o-tabs--buttontabs o-layout__unstyled-element" role="tablist">
		<li role="tab" aria-selected="true"><a class="o-layout__unstyled-element" href="#url">URL</a></li>
		<li role="tab"><a class="o-layout__unstyled-element" href="#html">HTML</a></li>
	</ul>
	<div id="url" class="o-tabs__tabpanel">
		<button id="copy-url" class="o-buttons o-buttons--primary o-buttons--mono">Copy URL to clipboard</button>
		<pre><code class="o-syntax-highlight--html bundle-box-code" id="polyfill-bundle-url">https://polyfill.io/v3/polyfill.min.js</code></pre>
	</div>
	<div id="html" class="o-tabs__tabpanel">
		<button id="copy-html" class="o-buttons o-buttons--primary o-buttons--mono">Copy HTML to clipboard</button>
		<pre><code class="o-syntax-highlight--html bundle-box-code" id="polyfill-bundle-html">&lt;script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"&gt;&lt;/script&gt;</code></pre>
	</div>
</div>

<div class="o-layout__query-sidebar o-layout-typography">
	<div>
		<label class="o-forms-field o-forms-field--optional">
			<span class="o-forms-title">
				<span class="o-forms-title__main">Polyfill-Library version</span>
				<span class="o-forms-title__prompt">Use a specific version of the polyfill-library (recommended for production websites).</span>
			</span>
			<span class="o-forms-input o-forms-input--select">
					<select id="library-version">
					{% for version in polyfills.versions | reverse %}
						{% if loop.first %} 
							<option value="" selected></option>
						{% else %}
							<option value="{{version}}" >{{version}}</option>
						{% endif %}
					{% endfor %}
					</select>	
			</span>
		</label>

		<label class="o-forms-field o-forms-field--optional">
			<span class="o-forms-title">
				<span class="o-forms-title__main">Filter polyfills</span>
				<span class="o-forms-title__prompt">Filter the polyfills in the "Available Polyfills" list.</span>
			</span>
			<span class="o-forms-input o-forms-input--text">
					<input name="filter" id="filter" type="text" class="o-forms__text" placeholder="Type to filter by name">
			</span>
		</label>
		<label class="o-forms-field o-forms-field--optional">
			<span class="o-forms-title">
				<span class="o-forms-title__main">Callback</span>
				<span class="o-forms-title__prompt">Name of the function to call after the polyfills are loaded.</span>
			</span>
			<span class="o-forms-input o-forms-input--text">
					<input name="callback" id="callback" type="text" class="o-forms__text">
			</span>
		</label>

		<div class="o-forms-field o-forms-field--optional" role="group" aria-labelledby="minify-title" aria-describedby="minify-info">
			<span class="o-forms-title">
				<span class="o-forms-title__main" id="minify-title">Minify bundle</span>
					<span class="o-forms-title__prompt" id="minify-info">Have the polyfill bundle be minified.</span>
			</span>
			<span class="o-forms-input o-forms-input--radio-box">
				<div class="o-forms-input--radio-box__container">
					<label>
						<input type="radio" name="minified" value="Yes" aria-label="Minify bundle" checked="" id="minified1">
							<span class="o-forms-input__label" aria-hidden="true">Yes</span>
					</label>
					<label>
						<input type="radio" name="minified" value="No" aria-label="Do not minify bundle" id="minified2">
							<span class="o-forms-input__label" aria-hidden="true">No</span>
					</label>
				</div>
			</span>
		</div>
	</div>
</div>
<div class="o-layout__main o-layout-typography">
	<div class="o-forms-field o-forms-field--optional" role="group" aria-labelledby="avaliable-polyfills-title" aria-describedby="avaliable-polyfills-info">
			<span class="o-forms-title">
				<span class="o-forms-title__main" id="avaliable-polyfills-title">Available Polyfills</span>
					<span class="o-forms-title__prompt" id="avaliable-polyfills-info">Check the boxes of the polyfills or polyfill-sets you want to have in your bundle.</span>
			</span>

		<div class="o-forms-input o-forms-input--checkbox" id="features-list">
		{% for item in polyfills.polyfillAliases %}
			<div class="polyfill" data-feature-name="{{item.name}}-polyfill">
				<label>
					<input type="checkbox" name="{{item.name}}">
					<span class="o-forms-input__label">{{item.name}}</span>
				</label>
				<button class="tooltip-button o-buttons o-buttons--secondary o-buttons--mono o-buttons-icon o-buttons-icon--more o-buttons-icon--icon-only" id="{{item.name}}-tooltip-target">
					<span class="o-buttons-icon__label">More about {{item.name}} (opens tooltip).</span>
				</button>

				<div id="{{item.name}}-tooltip-element" data-o-component="o-tooltip" data-o-tooltip-append-to-body data-o-tooltip-position="right" data-o-tooltip-target="{{item.name}}-tooltip-target" data-o-tooltip-toggle-on-click="true">
					<div class="o-tooltip-content">
						<ul>
						{% for polyfill in item.polyfills %}
							<li>{{polyfill}}</li>
						{% endfor %}
						</ul>
					</div>
				</div>
			</div>
		{% endfor %}
		{% for item in polyfills.polyfills %}
			<div class="polyfill" data-feature-name="{{item.name}}-polyfill">
				<label>
					<input type="checkbox" name="{{item.name}}">
					<span class="o-forms-input__label">{{item.name}}</span>
				</label>
				<button class="tooltip-button o-buttons o-buttons--secondary o-buttons--mono o-buttons-icon o-buttons-icon--more o-buttons-icon--icon-only" id="{{item.name}}-tooltip-target">
					<span class="o-buttons-icon__label">More about {{item.name}} (opens tooltip).</span>
				</button>

				<div id="{{item.name}}-tooltip-element" data-o-component="o-tooltip" data-o-tooltip-append-to-body data-o-tooltip-position="right" data-o-tooltip-target="{{item.name}}-tooltip-target" data-o-tooltip-toggle-on-click="true">
					<div class="o-tooltip-content">
						<ul>
							{% if item.aliasFor %}<li class='alias'>Alias for <code>{{item.aliasFor}}</code></li>{% endif %}
							{% if item.license %}<li class='license'><a title='This polyfill has a specific licence' href='https://choosealicense.com/licenses/{{item.licenseLowerCase}}'>License: {{item.license}}</a></li>{% endif %}
							{% if item.spec %}<li><a href='{{item.spec}}'>Specification</a></li>{% endif %}
							{% if item.docs %}<li><a href='{{item.docs}}'>Documentation</a></li>{% endif %}
							{% if item.baseDir %}<li><a href='https://github.com/Financial-Times/polyfill-library/tree/master/polyfills/{{item.baseDir}}'>Polyfill source</a></li>{% endif %}
						</ul>
					</div>
				</div>
			</div>
		{% endfor %}
		</div>
	</div>
</div>
<div class="o-layout__aside-sidebar"></div>
